import React from 'react';
import { connect } from 'react-redux';
import { Form, Radio, Menu, Input } from 'antd'
const SubMenu = Menu.SubMenu;
import 'styles/setting/workflow/new-workflow.scss'
const Search = Input.Search;
import { messages } from 'share/common'
import 'styles/setting/workflow/new-workflow.scss'

class NewWorkingLeftForm extends React.Component {
  constructor(props) {
    super(props);
    this.formTypes = ['1002', '1001', '3001', '4001'];
    this.state = {
      nowNode: {},
      approveRuleModalVisible: false,
      current: '',
      valid: true,
      loading: false,
      formName: '',
      formListFromType: null,
      copyFormListFromType: {},
    };
  }

  componentWillMount() {
    let { formListFromType } =this.props;
    this.setState({
      copyFormListFromType: JSON.parse(JSON.stringify(formListFromType))
    });
    this.getDefaultSelect(formListFromType);
  }

  getDefaultSelect = (formListFromType) => {
    //默认选择的菜单
    let typeArr = this.formTypes;
    for(let i = 0; i < typeArr.length; i++) {
      if (!!formListFromType[typeArr[i]].filter((sub) => {return sub.valid }).length) {
        this.setState({ current: formListFromType[typeArr[i]].filter((sub) => {return sub.valid })[0].formOID }, () => {
          this.props.onSelectForm(formListFromType[typeArr[i]].filter((sub) => {return sub.valid })[0].formOID);
        });
        break;
      }
    }
  };

  componentWillReceiveProps(nextProps) {
    let { valid, current } =this.state;
    let { formListFromType } = nextProps;
    this.setState({
      copyFormListFromType: JSON.parse(JSON.stringify(formListFromType))
    });
    this.getDefaultSelect(formListFromType);
  }


  onCancel = () => {
    this.setState({
      // newSheet: this.state.saveParam,
    }, function() {
      this.props.form.resetFields();
      this.props.close();
    })
  };

  handleClick = e => {
    this.setState({
      current: e.key,
    });
    this.props.onSelectForm(e.key, e.keyPath[1]);
  };

  handleSearch = val => {
    this.setState({
      formName: val.target.value
    })
  };

  analysisFormList = type => {
    let { copyFormListFromType, valid, formName } = this.state;
    let arr = copyFormListFromType[type].filter((sub) => {return sub.valid === valid})
      .filter(sub => {return (sub.formName.indexOf(formName) !== -1 )});
    return arr
  };

  render() {
    let { valid } = this.state;
    let formTypeObj = {
      '1001': messages('setting.key20')/*申请单*/,
      '1002': messages('setting.key847')/*报销单*/,
      '3001': messages('setting.key1742')/*借款单*/,
      '4001': messages('setting.key1915')/*通用表单*/,
    };
    return (
      <div className="left-form">
        <Radio.Group size="small"
                     value={valid}
                     onChange={(e) => {
                       if (e.target.value !== valid) {
                         this.setState({
                           valid: e.target.value,
                           formName: ''
                         })
                       }
                     }}
                     className="radio-group">
          <Radio.Button value={true}>{messages('setting.key1086')/*启用*/}</Radio.Button>
          <Radio.Button value={false}>{messages('setting.key1916')/*停用*/}</Radio.Button>
        </Radio.Group>
        <Search
          placeholder={messages('common.please.input')/*请输入*/}
          onChange={value => this.handleSearch(value)}
          style={{ width: '90%' }}
        />
        {
          this.analysisFormList('1001').length === 0
          && this.analysisFormList('1002').length === 0
          && this.analysisFormList('3001').length === 0
          && this.analysisFormList('4001').length === 0
          && <div className="no-data">
            <div className="mess-wrap">{messages('setting.key1307'/*暂无数据*/)}</div>
          </div>
        }
        <Menu
          className="workflow-scroll"
          onClick={this.handleClick}
          defaultOpenKeys={this.formTypes}
          selectedKeys={[this.state.current]}
          mode="inline"
        >
          {this.formTypes.map(type => {
            return ( !!this.analysisFormList(type).length &&
            <SubMenu key={type} title={<span>{formTypeObj[type]}</span>}>
              {this.analysisFormList(type).map(sub => {
                //前端搜索&切换状态
                return ( <Menu.Item key={sub.formOID}>{sub.formName}</Menu.Item>)
              })}
            </SubMenu>)
          })}
        </Menu>
      </div>
    )
  }
}

NewWorkingLeftForm.PropTypes = {
  onOpenAdditionModal: React.PropTypes.string.func,
  onSelectForm: React.PropTypes.string.func,
  formListFromType: React.PropTypes.object,
  setOfBooksId: React.PropTypes.string
};

function mapStateToProps(state) {
  return {
    company: state.login.company,
    user: state.login.user,
    language: state.main.language
  }
}

const WrappedNewWorkingLeftForm = Form.create()(NewWorkingLeftForm);

export default connect(mapStateToProps)(WrappedNewWorkingLeftForm);
